<!DOCTYPE html>
<html>

	<head>
		<title>leaflet-rotate.js</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

		<!-- Leaflet JS / CSS -->
		<script src="https://unpkg.com/leaflet@1.9/dist/leaflet-src.js"></script>
		<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9/dist/leaflet.css">

		<!-- Leaflet-Rotate -->
		<script src="../dist/leaflet-rotate-src.js"></script>

		<!-- include some miscellaneous -->
		<script src="../misc/route.js"></script>
		<script src="../misc/places.js"></script>
		<script src="../misc/loremIpsum.js"></script>
		<script src="../lib/debug.js"></script>

		<style>
			#map {
				width: 100%;
				height: 600px;
				border: 1px solid #ccc;
				max-height: 50vh;
			}
			/* TODO: fix incorrect map corners position when map has some margin */
			html, body {
				/* margin: 0; */
				/* padding: 0; */
			}
		</style>
	</head>

	<body>

		<div id="map"></div>

		<hr>

		<div>
			<p>
				<strong>Fly to bounds: </strong>
				<button onclick="map.flyToBounds(circle.getBounds());">CIRCLE</button>
				<button onclick="map.flyToBounds(polygon.getBounds());"> POLYGON</button>
				<button onclick="map.flyToBounds(path.getBounds());">PATH</button>
			</p>
			<p>
				<strong>Fly to: </strong>
				<button onclick="map.flyTo(places['Kyiv'], 10);">Kyiv</button>
				<button onclick="map.flyTo(places['London'], 10);">London</button>
				<button onclick="map.flyTo(places['San Francisco'], 10);">San Francisco</button>
				<button onclick="map.flyTo(places['Washington'], 10);">Washington</button>
				<button onclick="map.flyTo(places['Trondheim'], 10);">Trondheim</button>
			</p>
		</div>

		<script>
			var esri = L.tileLayer('https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {
				id: 'mapbox.streets',
				maxZoom: 24,
				maxNativeZoom: 18,
				attribution: 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community',
				// noWrap: true
			});

			var osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
				maxZoom: 24,
				maxNativeZoom: 19,
				attribution: '&copy; <a href="http://openstreetmap.org/copyright">OpenStreetMap</a> contributors',
				// noWrap: true
			});

			var map = L.map('map', {
				center: [55, 10],
				zoom: 2,
				layers: [esri],
				// worldCopyJump: true,
				// preferCanvas: false,
				zoomAnimation: false, /* DEBUG: L.Renderer._updateTransform() */
				rotate: true,
				rotateControl: {
					closeOnZeroBearing: false,
					// position: 'bottomleft',
				},
				bearing: 30,
				// attributionControl: false,
				// zoomControl: false,
				compassBearing: true,
				// trackContainerMutation: false,
				// shiftKeyRotate: false,
				// touchGestures: true,
				touchRotate: true,
				// touchZoom: true
			});

			// map.setBearing(90);
			// map.touchRotate.enable();

			// map.touchZoom.disable()
			// map.compassBearing.disable()
			// map.touchGestures.enable()

			// map.zoomControl.setPosition('bottomleft');
			// map.rotateControl.setPosition('bottomleft');
			// map.setMaxBounds([[-90,-180], [90,180]]);

			var layers = L.control.layers({
				'Empty': L.tileLayer(''),
				'Streets': osm,
				'Satellite': esri,
			}, null, {
				collapsed: false
			}).addTo(map);

			var markers = [];
			for (var i in places) {
				markers.push(L.marker(places[i], {
						draggable: true
					})
					.bindPopup('<b>' + i + '</b><br>' + loremIpsum)
					.bindTooltip('<b>' + i + '</b>',
						markers.length ? {} : {
							direction: 'right',
							permanent: true
						}
					)
					.addTo(map));
			}

			var path = L.polyline(route, {
				renderer: L.canvas()
			}).addTo(map);

			var circle = L.circle([53, 4], 111111)
				.addTo(map);

			var polygon = L.polygon([
				[48, -3],
				[50, -4],
				[52, 4]
			]).addTo(map);

			// Display some debug info
			L.Rotate.debug(map);
		</script>

		<a href="https://github.com/Raruto/leaflet-rotate" class="view-on-github" style="position: fixed;bottom: 10px;left: calc(50% - 60px);z-index: 9999;"> <img alt="View on Github" src="https://raruto.github.io/img/view-on-github.png" title="View on Github"
			  width="163"> </a>

	</body>

</html>